<template>
  <el-container>
    <el-header><div id="logo"><img src="../../../assets/logo.png"/></div></el-header>

    <el-container>
      <el-aside width="100%">
        <el-table @row-click="handle_click_row"
                  highlight-current-row
        :data="tableData"
                  stripe
        style="width: 100%">
          <el-table-column style="width:90%"
            show-overflow-tooltip
            align="left"
            prop="title"
            label="标题"
            :formatter="formatter">
          </el-table-column>
          <!--<el-table-column style="width: 10%"
            show-overflow-tooltip
                           align="left"
                           prop="spider"
                           label="爬虫"
          >
          </el-table-column>-->
      </el-table>
      <el-pagination @current-change="handle_current_change"
                     small
                     layout="prev, pager, next"
                     :total="fullData.length">
      </el-pagination>
      </el-aside>
    </el-container>
  </el-container>
</template>

<script>

  var baseUrl = "http://129.1.9.46:8726"
  var documentsUrl = baseUrl + "/documents"
  export default {
    name: 'ContentMain',
    data: function () {
      console.log("in data...")
      return {
        isEdit: false,
        rowData: { id:-1, title: "", spider: "", content: "", source: "", issueDate:"" },
        tableData: [],
        fullData: []
      }
    },
    methods: {
      handle_click_save: function(event) {
        if (event) {
          this.$http.put(baseUrl+"/articles", this.rowData).then(function(res){
            this.$message({message: '保存成功',type: 'success'});
            this.isEdit = false
          }, function(err){
            this.$message({message: '保存失败',type: 'error'});
            console.log(err)
          })
        }
      },
      handle_click_edit: function(event) {
        if (event) {
          this.isEdit = !this.isEdit
          if (this.isEdit){
            event.currentTarget.textContent = "View"
          } else {
            event.currentTarget.textContent = "Edit"
          }
        }
      },
      handle_click_row: function(row, event, column) {
        if (event){
          this.rowData.id  = row.id
          this.rowData.title = row.title
          this.rowData.spider = row.spider

          this.$http.get(baseUrl+"/articles/"+this.rowData.id, {headers:{Authz: window.sessionStorage.getItem('accessToken')}}).then(function(res){
            this.rowData.content = res.body.content
            this.rowData.source = res.body.source
            this.rowData.issueDate = res.body.issueDate
            this.$message({message: '加载成功',type: 'success'});
            this.$router.push({ name: 'Details', params: { rowData: this.rowData }})
          }, function(err){
            this.$message({message: '加载失败',type: 'error'})
            console.log(err)
          })

        }
      },
      handle_click_publish: function(event) {
        if (event) {
          this.$http.put(baseUrl+"/articles/"+this.rowData.id+"/_publish").then(function(res){
            this.$message({message: '发布成功',type: 'success'});
            this.isEdit = false
          }, function(err){
            this.$message({message: '发布失败',type: 'error'});
            console.log(err)
          })
        }
      },
      handle_click_withdraw: function(event) {
        if (event) {
          this.$http.put(baseUrl+"/articles/"+this.rowData.id+"/_withdraw").then(function(res){
            this.$message({message: '撤销成功',type: 'success'});
            this.isEdit = false
          }, function(err){
            this.$message({message: '撤销失败',type: 'error'});
            console.log(err)
          })
        }
      },
      handle_current_change: function(current_page){
        this.tableData = this.fullData.slice((current_page-1)*10, (current_page-1)*10+10)
      },
      formatter(row, column) {
        return row.title;
      },
    },
    created: function() {
      alert(window.sessionStorage.getItem('accessToken'))
      // this.http.interceptors.push(function(request, next) {
      //
      //   // modify method
      //   request.method = 'GET';
      //
      //   // modify headers
      //   // request.headers.set('X-CSRF-TOKEN', 'TOKEN');
      //   request.headers.set('Authorization', window.sessionStorage.getItem('accessToken'));
      //
      //   // continue to next interceptor
      //   next();
      // });
      console.log("in created...")
      this.$http.get(baseUrl+'/articles', {headers:{Authz: window.sessionStorage.getItem('accessToken')}}).then(function(res){
        // alert(res.data['name'])
        this.fullData = res.body
        this.tableData = res.body.slice(0,10)
        alert(Object.keys(res.data))
      }, function(err){
        this.$message({
          message: '加载列表失败',
          type: 'error'
        });
        console.log(err)
      })
    },
  }
</script>
<style>
  #logo {
  float: left;
}
  .align-oper {
    float: right;
    padding-left: 6px;
    padding-bottom: 6px;
  }
  .align-url {
    display: block;
    float: left;
  }
  .align-brief {
    float: left
  }
  .align-title {
    align-content: center;
  }
</style>
